<template>
	<view class="page">
		<navbar :title="'蜂竞技-'+game_info.name" />
		<view class="top-hr" style="height: 0px;"></view>
		<!-- <uv-popup ref="popDif" mode="center" custom-style="height: 200rpx;"
			customStyle="background: transparent;width: 80%;">
			<selectDifficulty @closePopView="fnColse" :showPopMenuData="popMenuData" @selectDif="selectDif">
			</selectDifficulty>
		</uv-popup> -->
		<uv-modal ref="modal" title="温馨提示" @confirm="confirmCreate" :showCancelButton="true">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</uv-modal>
		<uv-notify ref="uNotify" message="Hi uView" type="success"></uv-notify>
		<view class="main" :style="{ height: scrollHeight + 'px',justifyContent:pipeiStatus==true?'center':''}">
			<view class="operate">
				<!-- <view class="rank-icon" @click="showTips = true">
					<image class="img" src="/static/image/game-icon1.png"></image>
				</view> -->
				<!-- 没连蓝牙加class：rank-icon-null，连上蓝牙后去掉 -->
				<!-- <view class="rank-icon rank-icon-null" @click="showBlueTools = true">
					<image class="img" src="/static/image/game-icon3.png"></image>
				</view>
				<view class="rank-icon rank-icon-null" @click="showBlueTools = true">
					<image class="img" src="/static/image/game-icon2.png"></image>
				</view> -->
			</view>
			<view class="level_item level_1">
				<view style="display: flex;flex-direction: column;align-items: center;overflow: hidden;">
					<view class="" style="">
						<image mode="widthFix" style="width: 106px;overflow: hidden;margin-bottom: 18px;"
							src="/static/image/app/icon-cytz.png"></image>
					</view>
					<view class="" style="flex: 1;white-space: nowrap;overflow: hidden;">
						<view class="title111">| {{game_info.name}} |</view>
						<view class="title222">Origins Challenge</view>
					</view>
				</view>
			</view>
			<view class="level_item level_2">
				<view class="">
					<titleBar title="| 训练模式 |" enTitle="Training Mode" :titlefs="22"></titleBar>
				</view>
				<view style="display:flex;flex-direction: column;margin: 10px 0px;">
					<view class="">
						自我挑战
						<view class="title-en-common">Self-challenge</view>
					</view>
				</view>
				<!-- <view style="display:flex;flex-direction: column;margin: 10px 0px;">
					<view class="range">
						词库范围：{{groupStr}}
					</view>
				</view> -->
				<view class="">
					<view class="pipei_room_btn" @click="fnCreateRoom()" style="width: 83%;">
						创建训练
						<view class="btn-en">Create Training</view>
					</view>
				</view>

				<!-- <view class="">
					<view class="show_room_btn" @click="changeDifficulty()">
						更改难度
					</view>
				</view> -->

				<view class="">
					<view class="show_room_btn" @click="equipmentTesting()">
						设备测试
						<view class="btn-en">Device Test</view>
					</view>
				</view>
				<view class="">
					<view class="show_room_btn" @click="handleToRules">
						规则说明
						<view class="btn-en">Rules Explanation</view>
					</view>
				</view>
			</view>
		</view>
		<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消" @confirm="confirmCreate"
			@cancel="showPromptbox=false"></selectContentView>
		<popRules v-if="showTips" :gameId="gameId" title="词源挑战" @close="showTips = false" @confirm="showTips = false">
		</popRules>
	</view>
</template>

<script>
	import titleBar from '../../../components/games/title-bar.vue'
	import navbar from '../../../components/gamesNav.vue'
	import mifeng from '../../../components/games/mifeng.vue'
	import popRules from '../../../components/popRules.vue'
	import selectDifficulty from '../../../components/games/selectDifficulty.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			titleBar,
			navbar,
			mifeng,
			popRules,
			selectDifficulty
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		mounted() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		data() {
			return {
				gameId: '',
				showBlueToolsCom: false,
				showBlueTools: false,
				bleDevs: [],
				game_mode: '',
				current_type_info: {
					id: 4001,
					name: '小学组',
					en_name: 'primary'
				},
				groupStr: '小学组',
				popMenuData: [{
						id: 4001,
						name: '小学组',
						en_name: 'primary'
					},
					{
						id: 4002,
						name: '初中组',
						en_name: 'middle'
					},
					{
						id: 4003,
						name: '高中组',
						en_name: 'high'
					}
				],
				// socket
				isSuccess: false,
				allReadyStatus: false, //所有人的准备状态
				wsStatus: true, //websocket状态
				downtime_30: 0,

				user_info: {},
				game_info: {
					game_id: 10001, //极速拼词
					max_people_num: 1, //最大房间人数
				},
				show: false,
				title: '标题',
				content: '',

				people_num: 1, //房间人数
				game_config: {},

				showRoomBox: false,
				keyword: '',

				word: 'apple',
				scrollHeight: 0,
				gameWidth: 0,

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				room_list: [1, 2],
				showPromptbox: false,
				msg: '',
				showTips: false,

				pipeiStatus: true, //是否在匹配

				rules: `每位选手从词库中抽取45个单词在120s内进行速拼比赛。在发音官给出第一个单词发音后允许答题并开始计时，选手可以使用虚拟键盘或外接蓝牙键盘进行答题。
						输入单词完毕，点击键盘下方的提交按钮提交单词，由系统判断正误。
						选手可以点击屏幕“word”或对麦克风说“word”让发音官重新发音。
						选手可以点击“PASS”跳过该题，完成全部单词后回到第一个跳过的单词继续答题，直到完成全部单词。`,

				pipei_group_info: {},
				pipei_room_object: {
					101: {
						id: 101,
						groupname: '候车大厅：小学组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					},
					102: {
						id: 102,
						groupname: '候车大厅：初中组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					},
					103: {
						id: 103,
						groupname: '候车大厅：高中组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					}
				},
			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			that.gameId = that.game_info.id
			console.log(that.game_info);

			that.getGameConfigInfo();
			that.getUserGameRuleReadInfo();
		},
		methods: {
			handleToRules() {
				uni.navigateTo({
					url: `/pages/games/game_rules?id=${this.gameId}`
				})
			},
			// 获取该游戏规则阅读状态
			getUserGameRuleReadInfo() {
				var that = this;
				that.$http.getUserGameRuleReadInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					console.log('1*******1')
					console.log(res)
					if (res.code === 200 && !res.data) {
						that.showTips = true;
					}
				})
			},
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.people_num = that.game_config.default_people_num;
					}
				})
			},

			bluetoothTest() {
				uni.navigateTo({
					url: '/pages/bluetoothTest/bluetoothTest'
				})
			},
			// // 显示修改难度弹窗
			// changeDifficulty() {
			// 	this.$refs.popDif.open();
			// },
			// 难度选择回调
			// selectDif(value) {
			// 	console.log('value', value);
			// 	var selectIndex = value.group;
			// 	this.groupStr = this.popMenuData[selectIndex].name;
			// 	this.current_type_info = this.popMenuData[selectIndex];
			// 	this.fnColse();
			// },
			// // 难度弹窗关闭
			// fnColse() {
			// 	this.$refs.popDif.close();
			// },
			// 开始按钮点击事件
			beginGameClick() {
				// 跳转训练模式游戏详情
				uni.redirectTo({});

			},
			// 设备测试点击事件
			equipmentTesting() {
				uni.navigateTo({
					url: '/pages/games/game_equipment_test'
				})
			},

			// 创建房间
			fnCreateRoom() {
				var that = this;
				uni.navigateTo({
					url: '/pages/games/cytz/game_cytz_exercise_create_room?game_mode=' +
						that.game_mode +
						'&game_info=' +
						encodeURIComponent(JSON.stringify(that.game_info))
				})
			},

			// 取消创建房间
			fnCancelCreate() {
				var that = this;
				uni.navigateBack();
			},

			// 确认创建
			confirmCreate() {
				var that = this;
				const params = {
					matchType: 'jspc', //极速拼词

					game_id: that.game_info.id,
					people_num: that.people_num,
					pwd: '',
					type_id: that.current_type_info.id,
					game_mode: that.game_mode,
					groupname: that.game_info.name + '|' + that.current_type_info.name
				}
				that.showPromptbox = false;

				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;
						console.log('11111')
						console.log(group_info);
						var test_wordlist = group_info.test_wordlist;
						console.log(test_wordlist);
						if (test_wordlist.length > 0) {
							uni.navigateTo({
								url: '/pages/games/jspc/game_jspc' +
									'?group_info=' + encodeURIComponent(JSON.stringify(group_info)) +
									'&game_mode=' + that.game_mode +
									'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
								animationType: 'slide-in-bottom', // 右侧滑入效果
								animationDuration: 300 // 动画时长300毫秒
							})
						} else {
							uni.showToast({
								'title': '未获取到该词库数据，请换个词库试试',
								'icon': 'error'
							})
						}
					} else {
						uni.showToast({
							'title': res.msg,
							'icon': 'error'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		background-image: url(/static/image/app/gameBg.png);
		// background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		text-align: center;
		font-family: hzgb;
	}

	.main {
		// border: 2px solid blue;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		position: relative;

		.level_item {
			// overflow: hidden;
		}
	}

	.level_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}

	.level_2 {
		min-height: 168px;
		margin: 20px;
		margin-bottom: 0px;
		border-radius: 20px;
		color: white;
		background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
		padding: 25px;

		.pipei_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			// line-height: 50px;
			padding-top: 10px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 16px auto 32px;
		}

		.pipei_room_btn_ing {
			width: 200px;
			color: white;
			margin: 20px auto 0;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ff2b1d, #ff2b1d);
			box-shadow: 0px 7px 0px 0px rgba(184, 28, 37, 1);
			margin: 0 auto;
		}

		.create_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
		}

		.show_room_btn {
			width: 45%;
			margin: 20px auto;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 40px;
			// line-height: 40px;
			padding-top: 6px;
			color: black;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 6px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: #fff8e1;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;
				font-family: normal;
				margin-bottom: 10px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 60px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
				}
			}
		}
	}

	.level_3 {
		flex: 1;
		margin: 20px;
		margin-bottom: 20px;
		border-radius: 20px;
		color: white;
		background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
		padding-top: 25px;

		.create_room_btn {
			width: 200px;
			color: black;
			font-weight: bold;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
		}

		.show_room_btn {
			width: 120px;
			margin: 20px auto;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 40px;
			line-height: 40px;
			color: black;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 6px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: #fff8e1;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;
				font-family: normal;
				margin-bottom: 10px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 60px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
				}
			}
		}
	}



	.range {
		color: #fff;
		margin-top: 18px;
		font-size: 18px;
	}



	.operate {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 30px;

		.rank-icon {
			width: 30px;
			height: 30px;
			border-radius: 4px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0 4px 0 0 #d9b059;
			margin-bottom: 12px;

			.img {
				width: 30px;
				height: 30px;
			}
		}

		.rank-icon-null {
			background: linear-gradient(to top, #cfcfcf, #a1a1a1);
			box-shadow: 0 4px 0 0 #969696;
		}
	}

	.title111 {
		color: #fff;
		font-size: 24px;
		margin-bottom: 12px;
	}

	.title222 {
		color: #fff;
		font-size: 12px;
	}
</style>